<template>
  <footer class="footer">
    <span class="todo-count">
      <strong></strong> {{ unDoneNumber }} item left
    </span>
    <ul class="filters">
      <li>
        <a
          href=""
          @click.prevent="changeVisibility('all')"
          :class="{ selected: visibility == 'all' }"
          >All</a
        >
      </li>
      <li>
        <a
          href=""
          @click.prevent="changeVisibility('active')"
          :class="{ selected: visibility == 'active' }"
          >Active</a
        >
      </li>
      <li>
        <!-- :class="{ selected: visibility == 'Completed'} -->
        <a
          href=""
          @click.prevent="changeVisibility('completed')"
          :class="{ selected: visibility == 'completed' }"
          >Completed</a
        >
      </li>
    </ul>
    <button
      class="clear-completed"
      v-show="todoList.length > unDoneNumber"
      @click="delAll"
    >
      Clear completed
    </button>
  </footer>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
import useTodoStore from "../stores/useTodoStore";
import { TodoListType } from "../types/todomvc";
const store = useTodoStore();

withDefaults(
  defineProps<{
    unDoneNumber: number;
    visibility: string;
    todoList: TodoListType;
  }>(),
  // withDefaults 用这个声明类型声明方式 就可以在原本的基础上增加了prop的默认值
  {
    unDoneNumber: 0,
    visibility: "all",
    todoList: () => [],
  }
);

const changeVisibility = (vis: string) => {
  store.changeVisibility(vis);
};
const delAll = () => {
  store.delAll();
};
</script>
